// 要渲染的列表数据
const list = [
  { id: 1001, name: "Vue" },
  { id: 1002, name: "React" },
  { id: 1003, name: "Angular" },
];

function App() {
  return (
    <div className="App">
      {/* 渲染列表 
        map 循环哪个结构 return结构
        注意: 为循环出的元素添加独一无二的 key 属性(string/number)
        key的作用: dom复用提升性能
      */}
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
